<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layuiAdmin 后台管理员</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="__STATIC__/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="__STATIC__/layuiadmin/style/admin.css" media="all">
</head>
<body>

  <div class="layui-fluid">   
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">登录名</label>
            <div class="layui-input-block">
              <input type="text" name="username" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">手机</label>
            <div class="layui-input-block">
              <input type="text" name="phone" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>

          <div class="layui-inline">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
              <select name="role">
                <option value="">---</option>
                {volist name="roles" id="v"}
                <option value="{$v.id}">{$v.title}</option>
                {/volist}

              </select>
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
      
      <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
<!--          <button class="layui-btn layuiadmin-btn-admin" data-type="batchdel">删除</button>-->
          <button class="layui-btn layuiadmin-btn-admin" data-type="add">添加</button>
        </div>
        <table id="LAY-user-back-manage" lay-filter="LAY-user-back-manage"></table>


        <script type="text/html" id="rolesTitle">
          {{# layui.each(d.roles,function(index,roles_title){}}
           {{ roles_title.title }}
          {{# }); }}
        </script>

        <script type="text/html" id="buttonTpl">

              {{#  if(d.status == 1){ }}
              <button class="layui-btn layui-btn-xs">已审核</button>
              {{#  } else { }}
              <button class="layui-btn layui-btn-primary layui-btn-xs">未审核</button>
              {{#  } }}



        </script>

        <script type="text/html" id="table-useradmin-admin">
          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
          {{#  if(d.id == '1'){ }}
            <a class="layui-btn layui-btn-disabled layui-btn-xs"><i class="layui-icon layui-icon-delete"></i>删除</a>
          {{#  } else { }}
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
          {{#  } }}
        </script>

      </div>
    </div>
  </div>

 <script src="__STATIC__/layuiadmin/layui/layui.js"></script>
  <script>
  layui.config({
    base: '__STATIC__/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table'], function(){
    var $ = layui.$
    ,form = layui.form
    ,table = layui.table;

    table.render({
      elem: '#LAY-user-back-manage'
      ,url:'index'
      ,method:"post"
      ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      ,title: '用户数据表'
      ,cols: [[
        {field:'id', title:'ID', width:80, fixed: 'left',  sort: true}
        ,{field:'username', title:'用户名', width:120,}
        ,{field:'email', title:'邮箱', width:200, }
        ,{field:'phone', title:'电话', width:150, }
        ,{field:'roles', title:'角色', width:100,toolbar: '#rolesTitle', }
        ,{field:'user_domain', title:'用户域名',width:200}
        ,{field:'status', title:'状态', width:150,toolbar: '#buttonTpl', }
        ,{field:'update_time', title:'更新时间',width:200}
        ,{field:'create_time', title:'创建时间', width:200}
        ,{field:'remark', title:'备注', edit: 'text',  width:200}
        ,{fixed: 'right', title:'操作', toolbar: '#table-useradmin-admin', width:150}
      ]]
      ,page: true
    });
    
    //监听搜索
    form.on('submit(LAY-user-back-search)', function(data){
      var field = data.field;
      console.log(field);
      //执行重载
      table.reload('LAY-user-back-manage', {
        where: field
      });
    });



    //事件
    var active = {
      add: function(){
        layer.open({
          type: 2
          ,title: '添加管理员'
          ,content: 'create'
           ,area: ['450px', '700px']
          ,fixed: false //不固定
          ,maxmin: true
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
            ,submitID = 'LAY-user-create-submit'
            ,submit = layero.find('iframe').contents().find('#'+ submitID);

            //监听提交
            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
              var field = data.field; //获取提交的字段
              console.log(field);
              //提交 Ajax 成功后，静态更新表格中的数据
              $.ajax({
                type:"POST",
                url:"save",
                dataType:"json",
                data:field,
                success:function (res) {
                  console.log(res);
                  if (res['code']==1){
                    layer.msg(res['msg'],{icon: 1,time: 1000 },function () {
                    table.reload('LAY-user-back-manage');
                    // layer.close(index1); //关闭弹层
                    layer.close(index); //关闭弹层
                  });
                  }else {
                    layer.msg(res['msg'],{icon: 2,time: 1000 },function () {
                    });
                  }
                }
              });

            });

            submit.trigger('click');
          }
        });
      }
    };
    $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });




    //监听行工具事件
    table.on('tool(LAY-user-back-manage)', function(obj){
      var data = obj.data;
      // console.log(data.id);
      if(obj.event === 'del'){
        layer.confirm('确认删除改用户吗？删除后将无法返回！', function(index){
          $.ajax({
            type: "GET",
            url:'delete',
            data:{'id':data.id},
            dataType:"json",
            success:function (res) {
              // console.log(res);
              if (res['code']==1){
                layer.msg(res['msg'],{icon: 1,time: 1000 },function () {
                  obj.del();
                  layer.close(index);
                });
              }
            }
          });


        });
      } else if(obj.event === 'edit'){
        //iframe层-父子操作
        // console.log(data);
        layer.open({
          type: 2,
          area: ['450px', '700px'],
          fixed: false, //不固定
          maxmin: true,
          content: 'edit?id='+data.id,
          btn: ['确定', '取消'],
            yes: function(index, layero){
              var iframeWindow = window['layui-layer-iframe'+ index]
               ,submit = layero.find('iframe').contents().find("#LAY-user-back-submit");
              //监听提交
              iframeWindow.layui.form.on('submit(LAY-user-back-submit)', function(data){
                var field = data.field; //获取提交的字段

                //提交 Ajax 成功后，静态更新表格中的数据
                //loading层
                var index1 = layer.load(1, {
                  shade: [0.1,'#fff'], //0.1透明度的白色背景
                  time: 1000
                });
                $.ajax({
                  url:'update',
                  type:"POST",
                  data:field,
                  dataType:"json",
                  success:function (res) {
                    console.log(res['code']);
                    if (res['code'] == 1){
                      layer.msg(res['msg'],{icon: 1,time: 1000 },function () {
                        table.reload('LAY-user-back-manage');
                        layer.close(index1); //关闭弹层
                        layer.close(index); //关闭弹层
                      });
                    }
                  }
                });
              });
              submit.trigger('click');
              },
            btn2: function(){
                  layer.closeAll();
            }
          });
      }
    });


  });
  </script>
</body>
</html>

